<template>
    <div
      class="monsterBgLoading"
      :class="`monsterBgLoading${state}`"
      v-if="lodingShow"
    >
      <div class="progress_bar" v-if="state == 1">
        <img
          src="../assets/images/game/loading_purple.png"
          class="progress-bar"
          :style="{ width: `${progressBarWidth}%` }"
        />
        <p class="progress-text">
          {{ progressBarWidth > 100 ? 100 : progressBarWidth }}%
        </p>
      </div>
      <div class="progress_bar2" v-if="state == 2">
        <div class="progress-bar">
          <img
            src="../assets/images/game/loading2.png"
            :style="{ left: `${progressBarWidth - 100}%` }"
          />
        </div>
        <p class="progress-text">
          {{ progressBarWidth > 100 ? 100 : progressBarWidth }}%
        </p>
      </div>
  
      <div class="progress_bar3" v-if="state == 3">
        <div class="progress-bar">
          <img
            src="../assets/images/game/game03/progress_bg2.png"
            :style="{ left: `${progressBarWidth - 100}%` }"
          />
        </div>
        <p class="progress-text">
          Loading...{{ progressBarWidth > 100 ? 100 : progressBarWidth }}%
        </p>
      </div>
      <div class="progress_bar4" v-if="state == 4">
        <div class="progress-bar">
          <img
            src="../assets/images/game/gamersuh2.png"
            :style="{ left: `${progressBarWidth - 100}%` }"
          />
        </div>
        <p class="progress-text">
          {{ progressBarWidth > 100 ? 100 : progressBarWidth }}%
        </p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      state: {
        type: Number,
        default: 1,
      },
      progressBarWidth: {
        type: [String, Number],
        default: 100,
      },
    },
    watch: {
      progressBarWidth(val, oldVal) {
        if (val >= 100 || oldVal >= 100) {
          this.timer = setTimeout(() => {
            this.lodingShow = false;
            this.$emit("notify", this.lodingShow);
          }, 1000);
        }
      },
    },
    data() {
      return {
        lodingShow: true,
        maxWidth: 100,
        timer: null,
      };
    },
    beforeDestroy() {
      // 销毁定时器
      clearTimeout(this.timer);
    },
    mounted() {
      // this.goNextPath();
    },
    methods: {},
  };
  </script>
  
  <style lang="less" scoped>
  .monsterBgLoading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #a08fff url("../assets/images/game/loadingBg.jpg") no-repeat
      center top/100% 100%;
  }
  .monsterBgLoading2 {
    background: url("../assets/images/game/bg1.png") no-repeat left top/100% 100%;
  }
  .monsterBgLoading3 {
    background: #2d375b url("../assets/images/game/game03/login_bg.png") no-repeat
      center top/100% 100%;
  }
  .monsterBgLoading4 {
    background: #2d375b url("../assets/images/game/rushbackimg1.png") no-repeat
      center top/100% 100%;
  }
  .progress_bar {
    width: 318px;
    height: 53px;
    position: absolute;
    bottom: 100px;
    text-align: center;
    background: url("../assets/images/game/loading_box_purple.png") no-repeat
      center center/100%;
    padding: 13px 24px 16px;
    text-align: left;
    .progress-bar {
      border-radius: 4px 0 0 4px;
      height: 100%;
      transition: all 0.05s ease-in;
    }
  
    .progress-text {
      color: #a08fff;
      font-weight: 900;
      position: absolute;
      text-shadow: 0px 3px 0px rgba(22, 19, 27, 0.8);
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 25px;
    }
  }
  
  .progress_bar2 {
    width: 336px;
    height: 29px;
    background: url("../assets/images/game/prg2.png") no-repeat center center/100%;
    position: absolute;
    bottom: 173px;
    text-align: center;
    text-align: left;
    .progress-bar {
      width: 318px;
      height: 16px;
      position: relative;
      overflow: hidden;
      margin-top: 6px;
      margin-left: 10px;
      transition: all 0.05s ease-in;
      // border: 1px solid red;
      border-radius: 10px 0 0 10px;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: -100%;
      }
    }
    .progress-text {
      font-weight: 900;
      font-size: 19px;
      text-align: center;
      color: #1872d2;
      text-shadow: 0px 3px 0px rgba(22, 19, 27, 0.8);
      margin-top: 4px;
    }
  }
  .progress_bar3 {
    position: absolute;
    bottom: 120px;
    text-align: center;
    text-align: left;
    width: 270px;
    height: 29px;
    background: url("../assets/images/game/game03/progress_bg.png") no-repeat
      center center/100%;
    // padding: 3px 7px 5px 7px;
    .progress-bar {
      border-radius: 4px 0 0 4px;
      height: 100%;
      transition: all 0.05s ease-in;
      position: relative;
      overflow: hidden;
      margin-top: 3px;
      margin-left: 5px;
      width: 263px;
      height: 21px;
      border-radius: 10px 0 0 10px;
      // border: 1px solid red;
      img {
        position: absolute;
        top: 0px;
        left: -100%;
        width: 100%;
        height: 100%;
      }
    }
    .progress-text {
      font-weight: 900;
      font-size: 11px;
      color: #ffffff;
      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  
      position: absolute; /* 绝对定位，相对于进度条容器 */
      // bottom: -50px; /* 底部对齐 */
      left: 50%; /* 居中对齐 */
      top: 7px;
      transform: translateX(-50%); /* 水平居中 */
    }
  }
  .progress_bar4 {
    position: absolute;
    bottom: 120px;
    text-align: center;
    text-align: left;
    width: 270px;
    height: 29px;
    background: url("../assets/images/game/gamersuh1.png") no-repeat center
      center/100%;
    // padding: 3px 7px 5px 7px;
    .progress-bar {
      border-radius: 4px 0 0 4px;
      height: 100%;
      transition: all 0.05s ease-in;
      position: relative;
      overflow: hidden;
      margin-top: 3px;
      margin-left: 5px;
      width: 263px;
      height: 21px;
      border-radius: 10px 0 0 10px;
      // border: 1px solid red;
      img {
        position: absolute;
        top: 0px;
        left: -100%;
        width: 100%;
        height: 100%;
      }
    }
    .progress-text {
      font-weight: 900;
      font-size: 20px;
      font-family: PP Telegraf Ultrabold;
      color: #ffbf1b;
      text-shadow: 0 0.01rem 0 rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 50%;
      top: 23px;
      transform: translateX(-50%); /* 水平居中 */
    }
  }
  </style>
  